<template>
  <div>
    <div class="panel panel-default">
      <div class="panel-heading"><i class="el-icon-setting" /> 数据源设置</div>
      <div class="panel-body">
        <el-button-group class="padding-bottom">
          <el-button plain circle size="small" icon="el-icon-plus" @click="dialog.visible = true" />
          <el-button plain circle size="small" icon="el-icon-folder-delete" @click="cleanAllTable" />
        </el-button-group>
        <ul class="list-group " style="height: 70vh;overflow-y: scroll">
          <li v-for="(tableMetaData,index ) in selectedTables"  class="list-group-item">
            <span>{{ tableMetaData.table.actualTableName.tableName }}</span>
            <a class="pull-right cursor-point text-danger" @click="selectedTables.splice(index,1)"><i class="fa fa-trash " /> 删除</a>
          </li>
        </ul>
      </div>
    </div>

    <el-dialog :visible.sync="dialog.visible" :title="dialog.title">
      <el-row>
        <data-source-chose @changeConnName="changeConn" @changeNamespace="changeNamespace"/>
      </el-row>
      <el-row>
        <el-col :span="24">
          <table-search :selection="true" ref="tableSearch" :conn-name="connName" :namespace="namespace" />
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="selectTables">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableSearch from '@/views/database/TableSearch'

import DataSourceChose from '@/views/database/DataSourceChose'

export default {
  name: 'TableManage',
  components: { TableSearch, DataSourceChose },
  data() {
    return {
      selectedTables: [],
      dialog: {
        visible: false,
        title: '选择表'
      },
      connName: null,
      namespace: {
        catalog: null,
        schema: null
      }
    }
  },
  mounted() {

  },
  methods: {
    changeConn(connName){
      this.connName = connName;
    },
    changeNamespace(namespace){
      this.namespace = namespace;
    },
    selectTables() {
      this.selectedTables = this.$refs.tableSearch.getChoseTables()
      this.dialog.visible = false
    },
    getDataSource() {
      if (Object.keys(this.$refs).length === 0) {
        this.$message('请先选择数据表')
        return null
      }
      return {
        tables : this.$refs.tableSearch.getChoseTables(),
        connName: this.connName,
        namespace: this.namespace
      }
    },
    cleanAllTable() {
      this.selectedTables = []
    }
  }
}
</script>

<style scoped>
  @import "../../assets/custom-theme/bootstrap.css";
  .test{}
</style>
